<template>
    <div id="heart-container" @click="animateHeart">
      <div class="heart"></div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        isAnimated: false
      };
    },
    methods: {
      animateHeart() {
        this.isAnimated = !this.isAnimated;
        const heart = this.$el.querySelector('.heart');
        if (this.isAnimated) {
          heart.style.animation = 'pulse 1s infinite';
        } else {
          heart.style.animation = '';
        }
      }
    }
  };
  </script>
  
  <style scoped>
  #heart-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    cursor: pointer;
  }
  
  .heart {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    transform: rotate(-45deg);
    transform-origin: 50px 50px;
  }
  
  .heart:before,
  .heart:after {
    content: "";
    width: 100px;
    height: 100px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
  }
  
  .heart:before {
    top: -50px;
    left: 0;
  }
  
  .heart:after {
    top: 0;
    left: 50px;
  }
  
  @keyframes pulse {
    0% {
      transform: scale(1) rotate(-45deg);
    }
    50% {
      transform: scale(1.1) rotate(-45deg);
    }
    100% {
      transform: scale(1) rotate(-45deg);
    }
  }
  </style>